<template>
  <input type="file" @change="handleChange" />
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="商品名称" label="商品名称" />
    <el-table-column prop="商品品牌" label="商品品牌" />
    <el-table-column prop="商品分类" label="商品分类" />
  </el-table>
</template>

<script lang="ts" setup>
import * as XLSX from "xlsx";

import { ref } from "vue";

const tableData = ref<any>([]);

const handleChange = (e: any) => {
  // console.log(e.target.files[0]);

  const file = e.target.files[0];

  const reader = new FileReader();
  reader.readAsBinaryString(file);
  reader.onload = () => {
    const workbook = XLSX.read(reader.result, { type: "binary" });
    let res = workbook.Sheets["商品列表"];
    res = XLSX.utils.sheet_to_json(res);

    console.log(res);

    tableData.value = res;
  };
};
</script>
